<template>
    <div class="cms">
        <div class="cms-sidebar">
            <el-menu
                    router
                    :default-active="activeIndex"
                    background-color="#515a6e"
                    text-color="#dddddd"
                    active-text-color="#ffffff">
                <template v-for="menu in menuList">
                    <el-menu-item v-if="menu.children.length === 0" :index="menu.routing" :key="menu.ukId">
                        <i :class="menu.icon"></i>
                        {{menu.name}}
                    </el-menu-item>
                    <el-submenu v-if="menu.children.length !== 0" :index="menu.routing" :key="menu.ukId">
                        <template slot="title">
                            <i :class="menu.icon"></i>
                            {{menu.name}}
                        </template>
                        <el-menu-item v-for="child in menu.children" :index="child.routing" :key="child.ukId">
                            <i :class="child.icon"></i>
                            {{child.name}}
                        </el-menu-item>
                    </el-submenu>
                </template>
            </el-menu>
        </div>
        <div class="cms-detailed">
            <router-view></router-view>
            <el-backtop target=".el-table__body-wrapper" :visibility-height="10">
                <i style="color: #2d8cf0" class="el-icon-top"></i>
            </el-backtop>
        </div>
    </div>
</template>

<script>
    import MenuUtil from "../../utils/MenuUtil";
    import {mapDict} from "../../api/manage/dict";
    import DictUtils from "../../utils/DictUtils";
    import {listUserMenuTreeBySystem} from "../../api/manage/menu";

    export default {
        name: "Cms",
        components: {},
        data () {
            return {
                activeIndex: "",
                menuList: []
            }
        },
        methods: {
            mapDict () {
                mapDict().then(result => {
                    DictUtils.setDict(this, "cms", result.data.dictMap)
                })
            },
            listUserMenuTreeBySystem (activeSystem) {
                listUserMenuTreeBySystem(activeSystem).then(result => {
                    this.menuList = result.data.menuTree
                    this.activeIndex = MenuUtil.activeMenu(this.$route.path, 2)
                })
            }
        },
        created () {
            this.listUserMenuTreeBySystem(this.$store.state.Pabu.activeSystem)
            this.mapDict()
        },
        computed: {
            activeSystem () {
                return this.$store.state.Pabu.activeSystem
            }
        },
        watch: {
            activeSystem (newVal, oldVal) {
                this.listUserMenuTreeBySystem(newVal)
            }
        },
    }
</script>

<style>
    .cms {
        width: 100%;
        height: 100%;
        border-bottom: #cccccc 1px solid;
        float: left;
    }

    .cms-sidebar {
        width: 200px;
        height: 100%;
        background-color: #515a6e;
        float: left;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .cms-detailed {
        padding: 5px;
        width: calc(100% - 210px);
        height: calc(100% - 10px);
        float: left;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* iview样式重写 */
    .el-menu {
        border: none;
        user-select: none;
    }

    .cms-sidebar > .el-menu {
        border: none;
    }

    .cms-sidebar > .el-menu > li[class*="el-submenu is-active is-opened"] > div {
        background: #546580 !important;
    }

    .cms-sidebar > .el-menu > li[class*="el-menu-item is-active"],
    .cms-sidebar > .el-menu > li > ul > li[class*="el-menu-item is-active"] {
        border-left: #5cadff 5px solid;
        border-right: none;
        color: #fff;
        background: #6f83a2 !important;
    }

    .cms-sidebar > .el-menu > .el-menu-item {
        height: 50px;
        line-height: 50px;
    }

    /*子模版样式*/
    .cms-menu {
        width: 100%;
        height: 100%;
    }

    /* element ui样式重写 */
    .cms-menu > .el-table {
        height: calc(100% - 35px) !important;
    }

    .cms-menu > .el-table > .el-table__body-wrapper {
        height: calc(100% - 35px) !important;
    }

</style>
